"use client";

import { Card, Tag, Progress } from "antd";
import type { Course } from "@prisma/client";
import { CourseCardActions } from "./CourseCardActions";
import { api } from "~/trpc/react";
import { useRouter } from "next/navigation";

interface CourseCardProps {
  course: Course;
  onDelete: (course: Course) => Promise<void>;
}

export function CourseCard({ course, onDelete }: CourseCardProps) {
  const router = useRouter();
  const { data: taskStats } = api.tasks.getStats.useQuery({
    courseId: course.id,
  });

  return (
    <Card
      title={course.title}
      extra={<CourseCardActions course={course} onDelete={onDelete} />}
    >
      <div 
        className="flex flex-col space-y-4 cursor-pointer hover:bg-gray-50 transition-colors duration-200 p-2 rounded-md"
        onClick={() => router.push(`/courses/${course.id}`)}
      >
        <p className="text-gray-500">{course.description}</p>
        
        <div className="flex justify-between items-center">
          <span className="text-gray-500">
            创建时间：{new Date(course.createdAt).toLocaleDateString()}
          </span>
          <Tag color={course.status === "PUBLISHED" ? "green" : "orange"}>
            {course.status === "PUBLISHED" ? "已发布" : "草稿"}
          </Tag>
        </div>

        {taskStats && (
          <div className="flex justify-between items-center">
            <Progress 
              percent={taskStats.completionRate} 
              size="small"
              style={{ width: '70%' }}
            />
            <Tag color={
              taskStats.completionRate === 100 ? "success" :
              taskStats.completionRate > 50 ? "processing" : "warning"
            }>
              {taskStats.completionRate}% 完成
            </Tag>
          </div>
        )}
      </div>
    </Card>
  );
}